<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>身份验证</title>
    <link rel="stylesheet" type="text/css" th:href="${#request.getContextPath()}+'/static/css/normalize.css'"/>
    <link rel="stylesheet" type="text/css" th:href="${#request.getContextPath()}+'/static/css/loginCss.css'"/>
    <link rel="stylesheet" th:href="@{/static/layui/css/layui.css}" media="all"/>
    <style type="text/css">
        html,body{ background:none }
        /*取消选中效果*/
        span{
            -moz-user-select:none;/*火狐*/
            -webkit-user-select:none;/*webkit浏览器*/
            -ms-user-select:none;/*IE10*/
            -khtml-user-select:none;/*早期浏览器*/
            user-select:none;
        }
    </style>

</head>
<body>
<div class="login-top login-top-green">
    <p>
        <span>安亭养老</span>
        <em>欢迎登陆</em>
    </p>
</div>
<div class="login-box">
    <div class="login-status-con">
        <ul class="login-status-one">
            <li>
                <p class="current">身份验证</p>
                <p class="current">1</p>
            </li>
            <li>
                <p>找回密码</p>
                <p>2</p>
            </li>
            <li>
                <p>完成</p>
                <p>3</p>
            </li>
        </ul>
        <nav class="login-status-two textCenter mt30px">
            <ul class="inline-block">
                <li>
                    <label>手机号：</label>
                    <p class="current relative">
                        <span><input id="mobile" onblur="clearText(this)" onkeyup="value=value.replace(/[^\d]/g,'')" style="border: 1px solid #ccc;"  type="text" maxlength="11" placeholder="请输入手机号"></span>
                        <em><img style="display:none;" th:src="@{/static/img/close.png}"></em>
                    </p>
                    <h6 class="red" id="mobileMsg" style="display: none">手机号码格式错误，请重新输入</h6>
                </li>
                <li class="two">
                    <label>验证码：</label>
                    <p class="current">
                        <span><input id="verify" onblur="clearText(this)" onkeyup="value=value.replace(/[^\d]/g,'')" style="border: 1px solid #ccc;" maxlength="4" type="text" placeholder="请输入验证码"></span>
                        <span style="background: #1C9399;" class="msga-one cursor" onclick="sendVerifyCode(this)">获取短信验证码</span>
                    </p>
                    <h6 class="red" id="verifyMsg" style="display: none">验证码错误</h6>
                </li>
                <li>
                    <label></label>
                    <!-- <p class="cursor bgGray cursor">下一步</p> -->
                    <p class="cursor bgGreen cursor" onclick="next()">下一步</p>
                </li>
            </ul>
        </nav>
    </div>
</div>
</body>
<script th:src="${#request.getContextPath()}+'/static/js/jquery-2.1.3.min.js'" charset="utf-8"></script>
<script th:inline="javascript">var basePath = [[${#httpServletRequest.getContextPath()}]];</script>
<script type="text/javascript" th:src="@{/static/layui/layui.js}" charset="utf-8"></script>
<script>
    var validCode=true;
    //layer初始化
    var layer;
    layui.use('layer', function(){
        layer = layui.layer;
    });

    /**
     * 显示提示信息
     */
    function msg(id, text){
        $("#"+id).attr("style","border:1px solid #FF3B30;");
        $("#"+id+"Msg").html(text).show();
    }

    /**
     * 清除提示信息
     */
    function clearMsg(id){
        $("#"+id).attr("style","border:1px solid #ccc;");
        $("#"+id+"Msg").html('').hide();
    }

    /**
     * 监听文字输入。有文字时，显示清除文字图片，点击清除文字；无文字时，隐藏清除文字图片
     * 如果是手机号输入框，校验手机号格式
     */
    function clearText(obj){
        var id=$(obj).attr("id");
        var text = $(obj).val();

        if(isNotNull(text)){
            $(obj).parent().parent().find("img").show();
            $(obj).parent().parent().find("em").unbind().click(function(){
                $(this).parent().find("input").val('');
                $(this).find("img").hide();
                if(id=="mobile"){
                    msg("mobile", "手机号不能为空！");
                    return;
                }
            });
            if(id=="mobile"){
                if (!/^(((13[0-9]{1})|(15[0-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+\d{8})$/.test(text)){
                    msg("mobile", "手机号格式错误, 请重新输入！");
                    return;
                }
                //校验成功，清除错误提示
                clearMsg("mobile");
            }
        }else{
            if(id=="mobile"){
                if(!isNotNull(text)){
                    msg("mobile", "手机号不能为空！");
                    return;
                }
            }
            $(obj).parent().find("em").find("img").hide();
        }
    }

    /**
     * 验证不为空
     */
    function isNotNull(val) {
        return val!=null&&val!=''&&typeof val!='undefined';
    }

    /**
     * 下一步
     */
    function next(){
        var mobile = $("#mobile").val();
        var verify = $("#verify").val();
        if(!isNotNull(mobile)){
            msg("mobile", "手机号不能为空！");
            return;
        }
        if (!/^(((13[0-9]{1})|(15[0-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+\d{8})$/.test(mobile)){
            msg("mobile", "手机号格式错误, 请重新输入！");
            return;
        }
        if(!isNotNull(verify)){
            msg("verify", "验证码不能为空！");
            return;
        }

        $.ajax({
            url:basePath+"/msg/checkPhone",
            type:"post",
            dataType:"json",
            data:{"phone":mobile,"verifyCode":verify},
            success:function (data) {
                if(data.code == 200){
                    var phone = data.data;
                    window.location.href=basePath+"/resetPsw?phone="+phone;
                }else{
                    layer.msg(data.msg);
                }
            }
        })
    }

    /**
     * 发送短讯
     */
    function sendVerifyCode(obj){
        var mobile = $("#mobile").val();
        if(!isNotNull(mobile)){
            msg("mobile", "手机号不能为空！");
            return;
        }
        if (!/^(((13[0-9]{1})|(15[0-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+\d{8})$/.test(mobile)){
            msg("mobile", "手机号格式错误, 请重新输入！");
            return;
        }
        var time=30;
        var code=$(obj);
        if (validCode) {
            validCode=false;
            code.addClass("msga-two");
            code.attr("style","background:#ccc");
            code.html("重新发送  "+"("+time+")");
            interval=setInterval(function() {
                time--;
                $(obj).removeAttr("onclick");
                code.html("重新发送  "+"("+time+")");
                if (time==0) {
                    clearInterval(interval);
                    code.html("获取短信验证码");
                    code.attr("onclick","sendVerifyCode(this)");
                    code.attr("style","background:#1C9399");
                    validCode=true;
                    code.removeClass("msgs-two");
                }
            },1000)
        }

        $.ajax({
            url:basePath+"/msg/sendRandomCode",
            type:"post",
            dataType:"json",
            data:{"phone":mobile},
            success:function (result) {
                if(result.code != 200){
                    //clearInterval(interval);
                    layer.msg(result.msg);
                }
            }
        })
    }
</script>
</html>
